import VoteFooter from "./VoteFooter";
import VoteMain from "./VoteMain";
import { useContext, useEffect, useState } from "react";
import context from "../../ThemeContext";
const Vote = function Vote() {
  const { store } = useContext(context);
  const { supNum, oppNum } = store.getState().vote;
  const [_, setNum] = useState(0);

  useEffect(() => {
    const unsubscribe = store.subscribe(() => {
      setNum(+new Date());
    });
    return () => {
      unsubscribe();
    };
  });
  return (
    <div
      style={{
        width: "500px",
        margin: "0 auto",
      }}
    >
      <div
        style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <span>React还不错</span>
        <span>{supNum + oppNum}人</span>
      </div>
      <VoteMain />
      <VoteFooter />
    </div>
  );
};

export default Vote;
